<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	*{
		margin: 0;
		padding: 0;
	}
	.header{
		width: 100%;
		height: 80px;
		position: relative;
		background-image: linear-gradient(45deg,rgba(82,172,255,.9),rgba(160,241,234,.9));
	}
	
	
	.nav{
		height: 80px;
		position: absolute;
		right: 200px;
		list-style: none;
	}
	.nav li{
		float:left;
	}

	.nav a{
		text-decoration: none;
		display:block;
		color: #fff;
		float: left;
		font-size: 18px;
		width: 100px;
		text-align: center;
		line-height: 80px;
		right: 100px;
	}

	.nav a:hover{
		background-color: #17b8ee;
		color:#043383;
	}

	.title1{
		background: #EEE url() repeat;
		text-shadow: 3px -3px #e7f0fd, 2px -2px #0093E9;
		font-weight: bold;
		-webkit-text-fill-color: transparent;
		-webkit-background-clip: text;
		float: left;
		font-size: 35px;
		line-height: 80px;
		position: absolute;
		left: 30px;
	}

</style>
</head>

<body>
	
	
	<div class="header">
		<div>
			<h1 class="title1">筑梦冰雪，相约奥运</h1>
			<ul class="nav">
				<li><a href="index.html" target="_parent">首页</a></li>
				<li><a href="about.html" target="_parent">关于冬奥</a></li>
				<li><a href="">项目</a></li>
				<li><a href="">冬残奥</a></li>
				<li><a href="">学习</a></li>
			</ul>
		</div>
	</div>
</body>
</html>
